<template>
    <div>
        <van-cell-group>
            <van-field v-model="form.name" label="发布企业：" placeholder="请输入企业名称"/>
            <van-field v-model="form.workName" label="发布职位：" placeholder="请输入职位名称"/>
            <van-field v-model="form.contactsMan" label="联系人姓名：" placeholder="请输入联系人姓名"/>
            <van-field v-model="form.contactsPhone" label="联系方式：" placeholder="请输入联系人联系方式"/>
            <van-field v-model="form.position" label="企业所在地：" readonly placeholder="选择省/市/区"
                       @click="openPopup(provinces)"></van-field>
            <van-popup v-model="showPopup" position="bottom">
                <van-picker ref="provinces" :show-toolbar="true" @confirm="confirm" @cancel="cancel"
                            :columns="provinces"
                            @change="onProvinceChange"/>
            </van-popup>
            <van-field v-model="form.description" type="textarea"></van-field>
            <h1></h1>
            <van-button type="warning" size="large" @click="save">提交保存</van-button>
        </van-cell-group>
    </div>
</template>
<script>
    import {
        CellGroup,
        Field,
        RadioGroup,
        Radio,
        Cell,
        Button,
        Picker,
        Checkbox,
        CheckboxGroup,
        Toast,
        Popup
    } from 'vant';
    import http from '../common/http';

    export default {
        components: {
            [CellGroup.name]: CellGroup,
            [Field.name]: Field,
            [RadioGroup.name]: RadioGroup,
            [Radio.name]: Radio,
            [Cell.name]: Cell,
            [Button.name]: Button,
            [Picker.name]: Picker,
            [Checkbox.name]: Checkbox,
            [CheckboxGroup.name]: CheckboxGroup,
            [Toast.name]: Toast,
            [Popup.name]: Popup
        },
        data() {
            return {
                form: {
                    name: '',
                    workName: '',
                    contactsMan: '',
                    contactsPhone: '',
                    position: '',
                    description: '',
                },
                provincesData: null,
                provinces: [
                    {
                        values: '',
                        className: 'column1'
                    },
                    {
                        values: '',
                        className: 'column2',
                        defaultIndex: 1
                    },
                    {
                        values: '',
                        className: 'column3',
                        defaultIndex: 2
                    }
                ],
                showPopup: false,
                isFirst: true,
                position: ''
            }
        },
        created() {
            this.$parent.title = '登记工人信息';
            this.getProvince();
        },
        methods: {
            getProvince() { //省市区
                http.getUserJsonData(`/user/worker/get`, {}, (data) => {
                    this.provincesData = data.provinces;

                });
            },
            onProvinceChange(picker, values, index) {
                if (index == 0) {
                    picker.setColumnValues(1, Object.keys(this.provincesData[values[0]]));
                    picker.setColumnValues(2, this.provincesData[values[0]][picker.getColumnValue(1)]);
                }
                if (index == 1) {
                    picker.setColumnValues(2, this.provincesData[values[0]][values[1]]);
                }
            },

            save() {
                let params = {};
                Object.assign(params, this.form);
                params.province = this.$refs.provinces.getColumnValue(0);
                params.city = this.$refs.provinces.getColumnValue(1);
                params.area = this.$refs.provinces.getColumnValue(2);
                Toast('信息保存中。。。');
                http.postUserJsonData(`/user/worker/save`, params, () => {
                    Toast('保存成功');
                });
            },
            openPopup() {
                this.showPopup = true;
                if (!this.isFirst) return;
                this.isFirst = false;
                setTimeout(() => {
                    this.$refs.provinces.setColumnValues(0, Object.keys(this.provincesData));
                    this.$refs.provinces.setColumnValue(0, '湖南');
                    this.$refs.provinces.setColumnValues(1, Object.keys(this.provincesData['湖南']));
                    this.$refs.provinces.setColumnValue(1, '湘潭');
                    this.$refs.provinces.setColumnValues(2, this.provincesData['湖南']['湘潭']);
                    this.$refs.provinces.setColumnValue(2, '湘潭县');
                    console.log( this.$refs.provinces);
                }, 100)
            },
            confirm(data) {
                this.showPopup = false;
                this.form.province = data[0];
                this.form.city = data[1];
                this.form.area = data[2];
                if (Object.keys(this.provincesData[data[0]]).length == 1) {
                    this.position = data[0] + '/' + data[2];
                } else {
                    this.position = data[0] + '/' + data[1] + '/' + data[2];
                }
            },
            cancel() {
                this.showPopup = false;
            },
        }
    }
</script>
